/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div class="item-title">
      <div class="subject">
        <h3>统计报表 - 会员统计</h3>
        <h5>网站系统会员统计</h5>
      </div>
    </div>

    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>统计分析新增会员数量, 会员历史走势.</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>

    <div class="mDiv">
      <div class="ftitle">
        <h3>会员统计</h3>
        <h5>今日新增会员：{{report.today_count}}|本月新增会员：{{report.month_count}}|会员总数：{{report.total_count}}|会员余额总额：{{report.total_user_money}}|产生消费会员数：{{report.output_count}}</h5>
      </div>
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>
      <div class="searchbox">
        <el-date-picker
          size="small"
          v-model="dateRange"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="日期起始"
          end-placeholder="日期截止"
          @change="getDayReport()"
        ></el-date-picker>
      </div>
    </div>
    <div style="width: 100%;height: 400px;margin-top:30px">
      <v-chart :options="polar" theme="macarons" />
    </div>
  </div>
</template>

<script>
import ECharts from "vue-echarts";
import "echarts/theme/macarons.js";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/polar";
import "echarts/lib/component/legend";

export default {
  components: {
    "v-chart": ECharts
  },
  data() {
    return {
      polar: {
        title: {
          text: "会员新增趋势"
        },
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        calculable: true,
        legend: {
          data: ["新增会员"]
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} 人"
            }
          }
        ],
        series: [
          {
            name: "新增会员",
            type: "line",
            data: []
          }
        ]
      },
      dateRange: [
        new Date(new Date().toLocaleDateString()).getTime() -
          6 * 60 * 60 * 24 * 1000,
        new Date(new Date().toLocaleDateString()).getTime() +
          (1 * 60 * 60 * 24 * 1000 - 1)
      ],
      query: {},
      list: [],
      report: {}
    };
  },
  created() {
    this.getReport();
    this.getDayReport();
  },
  methods: {
    getReport() {
      var that = this;
      this.request.get("/user/report").then(function(res) {
        that.report = res;
      });
    },
    getDayReport() {
      var that = this;
      if (this.dateRange) {
        this.query.start_time = parseInt(this.dateRange[0].valueOf() / 1000);
        this.query.end_time = parseInt(this.dateRange[1].valueOf() / 1000);
      }
      this.request
        .get("/user/days/report", {
          params: that.query
        })
        .then(function(res) {
          that.list = res;
          that.polar.xAxis[0].data = [];
          that.polar.series[0].data = [];
          if (res.length > 0) {
            res.forEach(element => {
              that.polar.xAxis[0].data.unshift(element.days);
              that.polar.series[0].data.unshift(element.user_count);

              element.start_time = parseInt(new Date(element.days) / 1000);
              element.end_time = element.start_time + 86400;
            });
          }
        });
    },
    refresh() {
      this.getReport();
      this.$message({
        type: "success",
        message: "刷新成功！"
      });
    }
  }
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
